<template>
  <div>
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="basicData"
        :model="basicData"
        label-width="125px"
        label-position="left"
        label-suffix=":"
      >
        <div>
          <el-descriptions :model="basicData" :title="$t('BasicInformation')">
            <el-descriptions-item :label="$t('inventoryOrderLang.inventoryOrderNo')">{{ basicData.inventoryNo }}</el-descriptions-item>
            <el-descriptions-item :label="$t('destructionLang.createDate')">{{ basicData.gmtCreated }}</el-descriptions-item>
            <el-descriptions-item :label="$t('destructionLang.lastEditDate')">{{ basicData.gmtModified }}</el-descriptions-item>
            <el-descriptions-item :label="$t('destructionLang.destructionStatus')">{{ $t("statusLang." + getTitleByValue(statusOptions, basicData.status)) }}</el-descriptions-item>
            <el-descriptions-item :label="$t('cutOffOrderLang.creator')">{{ basicData.depotName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('problemItemLang.lastEditor')">{{ basicData.firstInventoryUser }}</el-descriptions-item>
            <el-descriptions-item :label="$t('destructionLang.warehouseCode')">{{ basicData.depotName }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-form>

      <div>
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="$t('inventoryOrderLang.inventoryList')" name="destructInfo">
              <template>
                <el-table :data="filteredData" style="width: 100%" border class="mt-10">
                  <el-table-column
                    :label="$t('tableIndex')"
                    type="index"
                    align="center"
                    width="60"
                  />
                  <el-table-column
                    prop="locationCode"
                    :label="$t('destructionLang.warehouseLocation')"
                  />
                  <el-table-column
                    prop="regionName"
                    :label="$t('locationLang.depotRegion')"
                  />
                  <el-table-column
                    prop="skuCode"
                    :label="$t('destructionLang.sku')"
                  />
                  <el-table-column
                    prop="declaredName"
                    :label="$t('OMSLang.itemCn')"
                  />
                  <el-table-column
                    prop="skuNum"
                    :label="$t('inventoryOrderLang.restNum')"
                  />
                  <el-table-column
                    prop="firstInventoryQty"
                    :label="$t('inventoryOrderLang.firstInventNum')"
                  />
                  <el-table-column
                    prop="secondInventoryQty"
                    :label="$t('inventoryOrderLang.againInventNum')"
                  />
                  <el-table-column
                    prop="disInventNum"
                    :label="$t('inventoryOrderLang.disInventNum')"
                  />
                  <el-table-column
                    prop="inventoryResult"
                    :label="$t('inventoryOrderLang.inventResult')"
                  />
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane :label="$t('log')" name="record">
              <template>
                <el-table :data="basicData.operLogs" style="width: 100%" border class="mt-10">
                  <el-table-column
                    :label="$t('tableIndex')"
                    type="index"
                    align="center"
                    width="80"
                  />
                  <el-table-column
                    prop="remark"
                    :label="$t('harvestLang.modification')"
                    width="180"
                  />
                  <el-table-column
                    prop="operUserName"
                    :label="$t('goodsSKULang.operator')"
                    width="180"
                  />
                  <el-table-column
                    prop="dataBefore"
                    :label="$t('harvestLang.originalState')"
                    width="180"
                  >
                    <template slot-scope="scope">
                      <p>
                        <span>{{ $t("statusLang." + getTitleByValue(statusOptions, parseInt(scope.row.dataBefore, 10))) }}</span>
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="dataAfter"
                    :label="$t('harvestLang.modifiedState')"
                    width="180"
                  >
                    <template slot-scope="scope">
                      <p>
                        <span>{{ $t("statusLang." + getTitleByValue(statusOptions, parseInt(scope.row.dataAfter, 10))) }}</span>
                      </p>
                    </template></el-table-column>
                  <el-table-column
                    prop="operTimeInfo"
                    :label="$t('operationDate')"
                    width="180"
                  >
                    <template slot-scope="scope">
                      <p>
                        {{ $t("domesticDate") + ":" }}
                        <span>{{ scope.row.operTimeInfo }}</span>
                      </p>
                      <p>
                        {{ $t("warehouseDate") + ":" }}
                        <span>{{ scope.row.operTimeInfoDepot
                        }}</span>
                      </p>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
          </el-tabs>
          <div v-if="operation === 1" slot="footer" style="text-align: center; margin-top: 30px">
            <el-button type="warning" plain size="small" @click="close">{{
              $t("cancel")
            }}</el-button>
            <el-button
              type="primary"
              size="small"
              :loading="submitLoading"
              @click="handleConfirm"
            >{{ $t("confirm") }}</el-button>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { inventoryOrderStatusOptionDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import {
  confirmInventoryOrder,
  getInventoryOrderDetail,
} from '@/api/business/operateManage/invetoryOrder'
export default {
  name: 'DepotForm',
  props: {
    value: {
      type: Number,
      default: undefined
    },
    visible: {
      type: Boolean,
      default: undefined
    },
    operation: {
      type: Number,
      default: 0 // 0查看 1新增 2修改
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '70%'
    }
  },
  data() {
    return {
      basicData: {
        destroyNo: null,
        depotName: null,
        gmtCreated: null,
        status: null,
        destroyTime: null,
        gmtModified: null
      },
      operateData: [],
      activeName: 'destructInfo',
      isVisible: false,
      statusOptions: getDictOptionList(inventoryOrderStatusOptionDict),
      getTitleByValue: getTitleByValue,
      depotDataForm: {
        backType: null
      },
      searchQuery: '',
      filteredData: [], // 用于存储筛选后的数据
      rules: {
        backType: {
          required: true,
          message: this.$t('pleaseSelect'),
          trigger: 'change'
        }
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    async getData() {
      if (!this.value) return
      const res = await getInventoryOrderDetail({ inventoryOrderId: this.value })
      if (!res || res.data === null) return
      this.basicData = res.data
      const detailList = [];
      res.data.detail.forEach(item => {
        let disInventNum = (item.secondInventoryQty ? item.secondInventoryQty : item.firstInventoryQty) - item.skuNum
        let inventoryResult = ''
        if (disInventNum === 0) {
          inventoryResult = this.$t('inventoryOrderLang.inventoryDraw')
        } else if (disInventNum > 0) {
          disInventNum = '+' + disInventNum
          inventoryResult = this.$t('inventoryOrderLang.inventoryProfit')
        } else {
          inventoryResult = this.$t('inventoryOrderLang.inventoryLoss')
        }
        if (res.data.status === 1) {
          disInventNum = null
          inventoryResult = this.$t('statusLang.notInventoryOrder')
        }
        detailList.push({
          locationCode: item.locationCode,
          regionName: item.regionName,
          containerCode: item.containerCode,
          skuCode: item.skuCode,
          declaredName: item.declaredName,
          skuNum: item.skuNum,
          firstInventoryQty: item.firstInventoryQty,
          secondInventoryQty: item.secondInventoryQty,
          disInventNum: disInventNum,
          inventoryResult: inventoryResult
        })
      })
      this.filteredData = detailList
    },
    async handleConfirm() {
      if (this.operation === 1) {
        const res = await confirmInventoryOrder({ inventoryOrderId: this.value })
        if (!res || res.returnCode !== 10000) {
          this.$message({
            type: 'warning',
            message: this.$t('inventoryOrderLang.confirmFail')
          })
        } else {
          this.$message({
            type: 'success',
            message: this.$t('handleSuccess')
          })
        }
      }
    },
    // 清空表单
    reset() {
      this.depotDataForm = {
        backType: null
      }
      this.$refs.depotDataForm.resetFields()
    },
    // 关闭
    close() {
      this.$emit('close')
      this.isVisible = false
    },
    closed() {
      this.isVisible = false
      this.reset()
    }
  }
}
</script>

<style></style>
